<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>H-ui大事记时间轴</title>
    <meta name="keywords" content="H-ui大事记时间轴">
    <meta name="description" content="H-ui大事记时间轴">
    <!--[if lt IE 9]>
    <script type="text/javascript" src="http://lib.h-ui.net/html5.js"></script>
    <script type="text/javascript" src="http://lib.h-ui.net/respond.min.js"></script>
    <script type="text/javascript" src="http://lib.h-ui.net/PIE_IE678.js"></script>
    <![endif]-->
    <link href="http://static.h-ui.net/h-ui/3.1/css/H-ui.reset.css" rel="stylesheet" type="text/css">
    <link href="/web/css/history.css" rel="stylesheet" type="text/css">
    <!--[if IE 6]>
    <script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('.pngfix,.icon');</script>
    <![endif]-->
    <style>
        /*#expressId{*/
        /*-webkit-tap-highlight-color: transparent;*/
        /*outline: 0;*/
        /*margin: 0;*/
        /*padding: 0;*/
        /*box-sizing: border-box;*/
        /*font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;*/
        /*}*/
        button:active {
            background: #7c7979;
        }
    </style>
</head>
<body>
<div class="head-warp">
    <div class="head">
        <div class="nav-box" style="text-align: center">
            <ul>
                <li class="cur"></li>
            </ul>
            <select style="padding: 7px 95px;border-radius:5px;font-size: 15px;margin-top: 15px;" id="expressId">
                <option value="">快递公司</option>
                <option value="shunfeng" hassubinfo="true">顺丰快递</option>
                <option value="shentong" hassubinfo="true">申通快递</option>
                <option value="yuantong" hassubinfo="true">圆通快递</option>
                <option value="yunda" hassubinfo="true">韵达快递</option>
                <option value="tiantian" hassubinfo="true">天天快递</option>
                <option value="huitongkuaidi" hassubinfo="true">汇通快递</option>
                <option value="quanfengkuaidi" hassubinfo="true">全峰快递</option>
                <option value="zhaijisong" hassubinfo="true">宅急送快递</option>
                <option value="debangwuliu" hassubinfo="true">德邦快递</option>
                <option value="ems" hassubinfo="true">EMS快递</option>
                <option value="baishihuitong" hassubinfo="true">百世汇通快递</option>
            </select>
            <div style="margin: 0 auto;padding: 20px">
                <input style="font-size: 17px;padding: 5px 10px;margin-right: 15px;border:1px solid #DDD;border-radius:5px"
                       type="text" id="expressNum" name="expressNum" placeholder="输入快递单号">
                <button style="font-size: 17px;padding: 3px 8px;border:1px solid #DDD;border-radius:5px " type="button"
                        id="KD">搜索
                </button>
            </div>
        </div>
    </div>
</div>
<div class="container" id="page-histiry">
    <div class="history">
    </div>
</div>
<script src="/web/js/jquery.min.js?v=2.1.4"></script>
<script type="text/javascript" src="http://static.h-ui.net/h-ui/3.1/js/H-ui.js"></script>
<script type="text/javascript" src="/web/js/history.js"></script>
<script>
    var exType = "";
    var exnum = "";
    $(function () {
        $(".history").Huifold({
            titCell: 'dl dt',
            mainCell: 'dl dd',
            type: 1,
            trigger: 'click',
            className: "selected",
            speed: "first",
        });
    });
    $("#expressId").change(function () {
        exType = $(this).find("option:selected").val();
    })
    $("#expressNum").change(function () {
        exnum = $(this).val();
    });
    var thisUrl;
    if(window.location.search.substr(5)){
        thisUrl=window.location.search.substr(5);
        thisHtml();
    }
    $("#KD").click(function () {
        thisHtml();
        thisUrl="http://www.kuaidi100.com/query?type="+exType+"&postid="+exnum;
    });
        function thisHtml() {
            console.log(window.location.search.substr(5));
            $.ajax(
                {
                    url: "/api/admin/express",
                    type: "GET",
                    data: {url: thisUrl},
                    dataType: "json",
                    async: false,
                    success: function (data, textStatus, jqXHR) {
                        var num = 0;
                        var time="";
                        var html="";
                        if (data) {
                            data.data.data.forEach(function (item) {
                                var numtime=item.time.substring(5,11);
                                var yeartime=item.time.substring(0,4);
                                var hourtime=item.time.substring(5,19);
                                var htmlv1="";
                                if(num=0){
                                    time=numtime;
                                    htmlv1 += '<div class="history-date"><ul><h2 class="first bounceInDown"><a href = "#nogo" style = "display: inline-block;" >'+numtime+'</a></h2>';

                                    htmlv1+='<li class="green bounceInDown"><h3  style="display: block;">'+hourtime+'<span>'+yeartime+'</span></h3><dl style="display: block;"><dt>'+item.context+'</dt></dl></li>';
                                    num = num + 1;
                                    html +=htmlv1;
                                }else {
                                    if (time == numtime){
                                        htmlv1 +='<li class="green bounceInDown"><h3  style="display: block;">'+hourtime+'<span>'+yeartime+'</span></h3><dl style="display: block;"><dt>'+item.context+'</dt></dl></li>';
                                        html += htmlv1
                                    }else {
                                        time=numtime;
                                        htmlv1='<div class="history-date"><ul><h2 class="first bounceInDown" style="margin-top: 0px; animation-duration: 2s;animation-timing-function: ease; animation-fill-mode: both; position: relative;"><a href = "#nogo" style = "display: inline-block;" >'+numtime+'</a></h2>';

                                        htmlv1 +='<li class="green bounceInDown" style="margin-top: 0px; animation-duration: 2s; animation-timing-function: ease; animation-fill-mode: both;"><h3  style="display: block;">'+hourtime+'<span>'+yeartime+'</span></h3><dl style="display: block;"><dt>'+item.context+'</dt></dl></li>';

                                        html += htmlv1;
                                    }
                                }
                            });
                            console.log(html);
                            $(".history").html(html);
                        }
                    }
                });
        }
</script>

</body>
</html>